<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>访问时间限制</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            color: #333;
            padding: 2rem;
            text-align: center;
            transition: background 1s ease;
        }

        .container {
            max-width: 600px;
            padding: 3rem;
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            transform: translateY(0);
            transition: all 0.3s ease;
        }

        .container:hover {
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
            transform: translateY(-5px);
        }

        .clock-icon {
            font-size: 5rem;
            color: #4a6fa5;
            margin-bottom: 1.5rem;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        h1 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            color: #2c3e50;
        }

        .message {
            font-size: 1.2rem;
            line-height: 1.6;
            margin-bottom: 2rem;
            color: #555;
        }

        .time-window {
            font-size: 1.8rem;
            font-weight: bold;
            color: #4a6fa5;
            margin: 1.5rem 0;
            padding: 0.8rem;
            border-radius: 8px;
            background-color: rgba(74, 111, 165, 0.1);
            display: inline-block;
        }

        .current-time {
            font-size: 1.1rem;
            color: #777;
            margin-bottom: 2rem;
        }

        .footer {
            margin-top: 3rem;
            color: #888;
            font-size: 0.9rem;
        }

        @media (max-width: 768px) {
            .container {
                padding: 2rem 1rem;
            }

            h1 {
                font-size: 2rem;
            }

            .clock-icon {
                font-size: 4rem;
            }

            .time-window {
                font-size: 1.5rem;
            }
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<div class="container">
    <div class="clock-icon">
        <i class="fas fa-clock"></i>
    </div>
    <h1>访问时间限制</h1>
    <p class="message">抱歉，本服务仅在指定时间段内开放。请在规定时间内访问，感谢您的理解。</p>
    <div class="time-window">10:00 - 20:00</div>
    <p class="current-time">当前时间: <span id="currentTime"></span></p>
</div>
<div class="footer">
    &copy; 2023 系统提示 | 请在规定时间内访问
</div>

<script>
    // 显示当前时间
    function updateCurrentTime() {
        const now = new Date();
        const hours = String(now.getHours()).padStart(2, '0');
        const minutes = String(now.getMinutes()).padStart(2, '0');
        const seconds = String(now.getSeconds()).padStart(2, '0');
        document.getElementById('currentTime').textContent = `${hours}:${minutes}:${seconds}`;
    }

    // 初始更新时间并设置定时器
    updateCurrentTime();
    setInterval(updateCurrentTime, 1000);

    // 根据时间变化背景色（模拟白天到夜晚的过渡）
    function updateBackgroundColor() {
        const now = new Date();
        const hour = now.getHours();
        const body = document.body;

        // 早晨 (6-10点)
        if (hour >= 6 && hour < 10) {
            body.style.background = 'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)';
        }
        // 白天 (10-18点)
        else if (hour >= 10 && hour < 18) {
            body.style.background = 'linear-gradient(135deg, #e0f7fa 0%, #80deea 100%)';
        }
        // 傍晚 (18-20点)
        else if (hour >= 18 && hour < 20) {
            body.style.background = 'linear-gradient(135deg, #ffe0b2 0%, #ffb74d 100%)';
        }
        // 夜晚 (20-6点)
        else {
            body.style.background = 'linear-gradient(135deg, #2c3e50 0%, #000000 100%)';
            document.body.style.color = '#fff';
            document.querySelector('.container').style.backgroundColor = 'rgba(44, 62, 80, 0.9)';
            document.querySelector('h1').style.color = '#fff';
            document.querySelector('.message').style.color = '#eee';
            document.querySelector('.current-time').style.color = '#ddd';
            document.querySelector('.footer').style.color = '#aaa';
        }
    }

    // 更新背景颜色
    updateBackgroundColor();
</script>
</body>
</html>
